Menade du?

    AJAX

    Logotyp för AJAX - Asynchronous JavaScript and XML

    Förkortningar

    Lägen för readyState

    1. UNSENT
    2. OPENED
    3. HEADERS_RECEIVED
    4. LOADING
    5. DONE
    UNSENT
    0: request not initialized
    OPENED
    1: server connection established
    HEADERS_RECEIVED
    2: request received
    LOADING
    3: processing request
    DONE
    4: request finished and response is ready

    Event i JavaScript

    • onabort
    • onerror
    • onload
    • onloadend
    • onloadstart
    • onprogress
    • onreadystatechange
    • ontimeout

    Variabler i JavaScript

    • readyState (onreadystatechange)
    • status
    • statusText
    • response
    • progress (onprogress)
    Konsolens nätverks-flik

    Fetch med JavaScript

    fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data));

    XMLHttpRequest med JavaScript

    xhr = new XMLHttpRequest(); xhr.onloadend = function() { alert(JSON.parse(xhr.response).query[0].title); }; xhr.open('GET', '/folder/file.extension?query=1&q=2', true); xhr.send();

    Stöd för cookies med JavaScript

    xhr.withCredentials = true;

    Sätt en egen header med JavaScript

    xhr.setRequestHeader('custom-header', 'value');

    Visa headers som objekt i JavaScript

    function smart_split(cntn, first, second) { arr = cntn.split(first); obj = {}; arr.forEach(function (line) { parts = line.split(second); header = parts.shift(); value = parts.join(second); obj[header] = value; }); return obj; } xhr = new XMLHttpRequest(); xhr.open('GET', window.location, true); xhr.onloadend = function() { headers = smart_split(xhr.getAllResponseHeaders().trim(), /[\r\n]+/, ': '); type = smart_split('mime-type=' + headers['content-type'], '; ', '='); } xhr.send();

    Hämta headers i JavaScript

    xhr = new XMLHttpRequest(); xhr.setRequestHeader('custom-header', 'value'); xhr.open('GET', '/folder/file.extension?query=1&q=2', true); xhr.onloadend = function() { console.log(xhr.status); console.log(xhr.statusText); console.log(xhr.getAllResponseHeaders()); } xhr.send();

    Räkna ut hur många procent som är kvar med JavaScript

    xhr.onprogress = function(event) { if (event.lengthComputable) { percentComplete = event.loaded / event.total * 100; } }

    Bifoga data från formulär med JavaScript

    formData = new FormData(); formData.append('key', value); xhr.send(formData);

    AJAX med jQuery

    $.ajax({ url: "/file.php", data: { 'q' : '' }, success: function(msg) { console.log('Ett bra uppstod: ' + msg); }, error: function(msg) { console.log('Ett fel uppstod: ' + msg); } });

    Programmeringsspråk

    Webhooks

    Teknik

    Lisa Ajax

    Externa länkar

    Kuriosa